import { analysisPreview } from '@/services/api/api-tophub-rank';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import { useAccess, useModel } from '@umijs/max';
import { DatePicker, Row, Space, Tooltip } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React, { useEffect, useState } from 'react';
import AnalysisPreviewRank from './AnalysisPreviewRank';
import DetailsRank from './DetailsRank';
import ListRank from './ListRank';

dayjs.extend(customParseFormat);

const dateFormat = 'YYYY-MM-DD';

interface TabRankProps {
  hotRankTypes: any[];
}

const TabRank: React.FC<TabRankProps> = ({ hotRankTypes }) => {
  const access = useAccess();

  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  const [createdTimes, setCreatedTimesState] = useState([
    dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
    dayjs().format('YYYY-MM-DD HH:mm:ss'),
  ]);

  const [loading, setLoading] = useState(false);

  const [previewData, setPreviewDataState] = useState<TophubRankData.AnalysisPreview>();

  const [selectRank, setSelectRank] = useState<TophubRankData.RankListSo>();

  /**
   * 加载 保存初始化数据
   * @param key
   */
  const loadAnalysisPreview = async () => {
    setLoading(true);
    try {
      const response = await analysisPreview({
        createdTimes: createdTimes,
      });
      const { code, data } = response;
      if (code === 0) {
        setPreviewDataState(data);
        setLoading(false);
      } else {
        // setLoading(false);
      }
    } catch (error) {}
  };

  useEffect(() => {
    loadAnalysisPreview();
  }, [createdTimes]);

  return (
    <Row>
      <ProCard
        style={{
          marginTop: '-24px',
        }}
        split="vertical"
        ghost
      >
        <ProCard
          colSpan={'540px'}
          ghost
          bodyStyle={{
            padding: 0,
            paddingRight: 12,
            marginTop: '-10px',
          }}
        >
          <ListRank
            createdTimes={createdTimes}
            clear={selectRank == undefined}
            onRefurbish={() => {}}
            onSelect={(value: TophubRankData.RankListSo) => {
              setSelectRank(value);
            }}
            extra={[
              <DatePicker.RangePicker
                style={{
                  width: 230,
                }}
                defaultValue={[dayjs().startOf('month'), dayjs()]}
                maxDate={dayjs()}
                format={dateFormat}
                variant="filled"
                allowClear={false}
                onChange={(dates, dateStrings) => {
                  setCreatedTimesState(dateStrings.map((item) => item + ' 00:00:00'));
                }}
              />,
            ]}
            onReset={() => {
              setCreatedTimesState([
                dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
                dayjs().format('YYYY-MM-DD HH:mm:ss'),
              ]);
              setSelectRank(undefined);
            }}
          />
        </ProCard>
        {selectRank ? (
          <ProCard
            title={
              selectRank ? (
                <Space align="center">
                  <Tooltip title="返回">
                    <ArrowLeftOutlined
                      onClick={() => {
                        setSelectRank(undefined);
                      }}
                      style={{
                        color: 'red',
                        fontSize: 18,
                      }}
                    />
                  </Tooltip>
                  {selectRank?.sourceName} / {selectRank?.levelName} / {selectRank?.channelName}
                </Space>
              ) : (
                '数据统计 - 综合'
              )
            }
            bodyStyle={{
              paddingTop: 0,
            }}
          >
            <DetailsRank createdTimes={createdTimes} rank={selectRank} onRefurbish={() => {}} />
          </ProCard>
        ) : (
          <AnalysisPreviewRank
            loading={loading}
            previewData={previewData}
            onRefurbish={() => {
              loadAnalysisPreview();
            }}
          />
        )}
      </ProCard>
    </Row>
  );
};
export default TabRank;
